<template>
	<view class="">

		<view class="earnings-box" style="background: linear-gradient(180deg,#0081ff,#069cff 10%,rgba(255,214,41,.01) 90%);
		}">
			<view class="">
				<view class="earnings-header">
					<view class="left">
						<view class="title  font-30">
							今日数据
						</view>
						<view class="item">
							<view class="">
								<view class="num font-30 theme-color-num ">
									{{numData.today_download_num}}
								</view>
								<view class="text font-27">
									下载次数
								</view>
							</view>
							<view class="">
								<view class="num font-30 theme-color-num ">
									{{numData.today_money_num}}
								</view>
								<view class="text font-27">
									收益金额
								</view>
							</view>
						</view>
						<!-- <view class="item">
								<view class="">
									<view class="num font-30 theme-color-num ">
										0
									</view>
									<view class="text font-27">
										预估eCPM
									</view>
								</view>
								<view class="">
									<view class="num font-30 theme-color-num ">
										0
									</view>
									<view class="text font-27">
										预估金额
									</view>
								</view>
							</view> -->
					</view>

					<view class="centre">

					</view>

					<view class="right">
						<view class="title  font-30">
							昨日数据
						</view>
						<view class="item">
							<view class="">
								<view class="num font-30 theme-color-num ">
									{{numData.yesterday_download_num}}
								</view>
								<view class="text font-27">
									下载次数
								</view>
							</view>
							<view class="">
								<view class="num font-30 theme-color-num ">
									{{numData.yesterday_money_num}}
								</view>
								<view class="text font-27">
									收益金额
								</view>
							</view>
						</view>
						<!-- 	<view class="item">
									<view class="">
										<view class="num font-30 theme-color-num ">
											0
										</view>
										<view class="text font-27">
											实际eCPM
										</view>
									</view>
									<view class="">
										<view class="num font-30 theme-color-num ">
											0
										</view>
										<view class="text font-27">
											预估金额
										</view>
									</view>
								</view>
							 -->
					</view>
				</view>
			</view>





		</view>

		<view class="earnings-list-box">
			<view class="earnings-title">
				<view class="font-30">
					收益明细
				</view>
				<!-- #d7effd -->
				<view class="flex a-center dama" >
					<view class="dama" @tap="tapIsDim" >
						{{ isDim?'关闭打码':'一键打码' }}
					</view>
					<view class="" style="margin-right: 20rpx;">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{date}}</view>
						</picker>
					</view>
				</view>
			</view>


			<view class="earnings-list">
				<view class="earnings-item" v-for="(item,index) in imgsList" :key="index">
					<view class="left" :class="isDim?'dim':''">
						<image :src="item.src" style="border-radius:10rpx; width: 110rpx;height: 110rpx;background:#ccc;" mode="aspectFill"></image>
					</view>
					<view class="right">
						<view class="top " :class="isDim?'dim':''">
							<view class="d-flex a-center">
								<view class="font-30">
									图小秀
								</view>
								<view class="label">
									{{imgTypeData[item.img_type].name}}
								</view>
							</view>
							<view class="">
								口令:{{item.framer_id}}
							</view>
						</view>
						<view class="bottom">
							<view class="">
								<view class="">
									下载次数：<text class="theme-color">{{item.download}}</text>
								</view>
							</view>
							<view class="">
								<view class="">
									预估收益：<text class="theme-color">{{item.sum}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<dataNo v-if="imgsList.length == 0"></dataNo>

				<view class="" style="text-align: center;margin-top: 30rpx;" v-if="pageIndex != 1">
					{{none}}
				</view>

			</view>

		</view>
	</view>

</template>

<script>
	export default {
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				imgTypeData: {
					1: {
						name: "头像",
					},
					2: {
						name: "壁纸",
					},
					3: {
						name: "背景图",
					},
					4: {
						name: "表情包",
					}
				},
				pageIndex: 1,
				isDim: false,
				none: '',
				imgsList: [],
				numData: {},
				date: currentDate,
			}
		},
		onReachBottom() {
			// this.adUnitIdbanner = this.advertisingData1(this.advertisingDataType.bannerList)
			if (this.none) {
				return
			}
			++this.pageIndex
			this.getImgsList()
		},
		onLoad() {
			this.getImgsList()
			this.getNum()
		},
		onShow() {
			var uni_id_token = uni.getStorageSync('uni_id_token')
			if(!uni_id_token){
				uni.navigateTo({
					url:"/pages/my/login/login"
				})
			}
		},
		onPullDownRefresh() {
			this.getImgsList(true)
		},
		methods: {
			reset(refresh) {
				this.none = ''
				this.pageIndex = 1
				if (refresh) {
					this.imgsList = []
				}
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
				this.getImgsList(true)
			},
		
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
		
			async getNum() {
				var user = uni.getStorageSync('user')
				var data = await this.$api.getTodaySumNum({
					user_id: user.openid
				})
				this.numData = data.data
			
			},
			async getImgsList(refresh) {
				const db = uniCloud.database();
				const dbCmd = db.command // 取指令
				var user = uni.getStorageSync('user')
				if (refresh) {
					this.reset()
				}
				var data = await this.$api.getData({
					dbName: "wx_user_earnings",
					whereJson: {
						add_data:this.date,
						user_id: user.openid,
					},
					pageIndex: this.pageIndex,
					pageSize: 10
				},true)
				uni.stopPullDownRefresh();
				if (refresh) {
					this.reset(true)
				}
				if (data.rows.length != 0) {
					this.imgsList = [...this.imgsList, ...data.rows];
				} else {
					this.none = '没有数据了'
				}
			},
			tapIsDim() {
				this.isDim = !this.isDim
			}
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.dim {
		filter: blur(12rpx)
	}

	.earnings-list-box {
		position: relative;
		top: -50rpx;
		z-index: 5;

		.earnings-list {
			padding: 0 30rpx;

			.earnings-item {
				margin-top: 30rpx;
				display: flex;

				.right {
					width: 100%;
					margin-left: 10rpx;

					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;
						background: #f7f7f7;
						padding: 5rpx 10rpx;
						border-radius: 10rpx;
						margin-top: 22rpx;
					}

					.top {
						display: flex;
						align-items: center;
						justify-content: space-between;
					}

					.label {
						padding: 5rpx 10rpx;
						background: #edf8fd;
						color: #0188ff;
						font-size: 20rpx;
						border-radius: 50rpx;
						margin-left: 10rpx;
					}
				}
			}

		}

		.earnings-title {
			display: flex;
			justify-content: space-between;
			background: #fafafa;
			padding: 30rpx 30rpx;

			.dama {
				display: flex;
				padding: 10rpx 30rpx;
				background: #fff;
				border-radius: 50rpx;
			}
		}
	}

	.earnings-box {
		padding: 30rpx 30rpx 0 30rpx;
		position: relative;
		height: 300rpx;
		// height: 432rpx;
		z-index: 2;

		.earnings-header {
			padding-top: 30rpx;
			width: 100%;
			// height: 300rpx;
			background: rgba(255, 255, 255, .8);
			display: flex;

			.centre {
				margin-top: 40rpx;
				height: 100rpx;
				width: 1rpx;
				background: #dddddd;
			}

			.title {
				text-align: center;
				margin-bottom: 30rpx;
			}

			.item {
				margin-bottom: 20rpx;
				text-align: center;
				display: flex;
				justify-content: space-around;
			}

			.left {
				width: 50%;


			}

			.right {
				width: 50%;
			}
		}
	}
</style>
